<template>
	<el-form :inline="true" :model="formData" class="demo-form-inline">
		<el-form-item>
			<el-input v-model="formData.name" placeholder="请输入角色名" />
		</el-form-item>
		<el-form-item>
			<el-input v-model="formData.description" placeholder="请输入描述" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onQuery">查询</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="edit">新增角色</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="id" label="ID" width="120" />
		<el-table-column prop="name" label="角色名称" width="200" />
		<el-table-column prop="description" label="角色描述" width="200" />

		<el-table-column fixed="right" label="操作">
			<template #default="scope">
				<el-button type="primary" size="small" @click="edit(scope.row)"
					>编辑</el-button
				>
				<el-button
					type="primary"
					plain
					size="small"
					@click="setPermissions(scope.row.id)"
					>设置权限</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<br />
	<Pagex @on-change="callRoleApi" v-model="pageData"></Pagex>

	<el-dialog v-model="show" title="编辑" width="35%">
		<el-form label-position="left">
			<el-form-item label="角色名称">
				<el-input v-model="roleInfo.name" />
			</el-form-item>
			<el-form-item label="角色描述">
				<el-input v-model="roleInfo.description" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button v-if="roleInfo.id" @click="deleteRole" type="danger"
					>删除</el-button
				>
				<el-button
					v-if="roleInfo.id"
					type="primary"
					@click="updateRole"
				>
					更新
				</el-button>
				<el-button
					v-if="!roleInfo.id"
					type="success"
					@click="insertRole"
				>
					添加
				</el-button>
			</span>
		</template>
	</el-dialog>

	<el-drawer v-model="showAdd">
		<template #header>
			<h4>编辑权限</h4>
		</template>

		<template #default>
			<el-row>
				<el-col :span="12">
					<div>权限列表</div>
				</el-col>
				<el-col :span="12">
					<div style="float: right">
						<el-button
							type="primary"
							@click="addPermissions"
							size="small"
							>添加权限</el-button
						>
					</div>
				</el-col>
			</el-row>
			<el-table :data="permissionsInfo" style="width: 100%">
				<el-table-column
					fixed
					prop="description"
					label="权限"
					width="200"
				>
					<template #default="scope">
						<el-button
							with="100%"
							size="small"
							:type="hasOrNo(scope.row.id) ? 'success' : 'info'"
							@click="
								changePermissions(
									scope.row.id,
									hasOrNo(scope.row.id)
								)
							"
							>{{ scope.row.description }}</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</el-drawer>

	<el-dialog v-model="perShow" title="权限" width="35%">
		<el-form label-position="left">
			<el-form-item label="权限名称">
				<el-input v-model="permissions.name" />
			</el-form-item>
			<el-form-item label="权限描述">
				<el-input v-model="permissions.description" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="success" @click="insertPer"> 添加 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { roleApi, permissionApi } from '@/api';
	import { ref, onMounted, reactive } from 'vue';
	import { ElMessage } from 'element-plus';
	const tableData = ref([]);
	const show = ref(false);
	const showAdd = ref(false);
	const roleInfo = reactive({
		id: undefined,
		name: '',
		description: '',
	});
	const formData = reactive({
		name: '',
		description: '',
	});
	const pageData = reactive({
		total: 0,
		pageSize: 5,
		pageNum: 1,
	});
	const roleId = ref();
	const permissionsInfo = ref<any>([]);
	const permissions = reactive({
		name: '',
		description: '',
	});
	const rolePermissions = ref<any>([]);
	const perShow = ref(false);
	const setPermissions = (id: any) => {
		roleId.value = id;
		callPermissionApi();
		getRolePermissions(id);
		showAdd.value = true;
	};
	const addPermissions = () => {
		permissions.name = '';
		permissions.description = '';
		perShow.value = true;
	};

	const insertPer = () => {
		permissionApi.insert.call(permissions).then(() => {
			ElMessage.success('权限增加成功');
			callPermissionApi();
			perShow.value = false;
		});
	};

	const hasOrNo = (id: any) => {
		return rolePermissions.value.map((item: any) => item.id).includes(id);
	};
	const changePermissions = (id: any, has: any) => {
		roleApi.editPermission
			.call({ permissionId: id, has, roleId: roleId.value })
			.then(() => {
				setPermissions(roleId.value);
				ElMessage.success('操作成功');
			});
	};

	const callPermissionApi = () => {
		permissionApi.select.call().then((res: any) => {
			permissionsInfo.value = res;
		});
	};
	const getRolePermissions = (id: any) => {
		permissionApi.getbyrid.call({ id }).then((res) => {
			rolePermissions.value = res;
		});
	};

	const edit = (row: any) => {
		if (row) {
			roleInfo.id = row.id;
			roleInfo.name = row.name;
			roleInfo.description = row.description;
		} else {
			roleInfo.id = undefined;
			roleInfo.name = '';
			roleInfo.description = '';
		}
		show.value = true;
	};

	onMounted(() => {
		callRoleApi();
	});

	const callRoleApi = () => {
		let pageNum = pageData.pageNum;
		let pageSize = pageData.pageSize;
		roleApi.select
			.call({
				...formData,
				pageNum,
				pageSize,
			})
			.then((res: any) => {
				pageData.total = res.total;
				tableData.value = res.items;
			});
	};

	const onQuery = () => {
		callRoleApi();
	};

	const insertRole = () => {
		roleApi.insert.call(roleInfo).then(() => {
			after();
		});
	};
	const deleteRole = () => {
		roleApi.delete.call({ id: roleInfo.id }).then(() => {
			after();
		});
	};
	const updateRole = () => {
		roleApi.update.call(roleInfo).then(() => {
			after();
		});
	};

	const after = () => {
		show.value = false;
		callRoleApi();
		ElMessage.success('操作成功');
	};
</script>